:host {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    display: grid;
    grid-auto-rows: 36px;
}

.item {
    height: 36px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0 12px 0 4px;
    flex-direction: row;
    transition: ease-in-out .3s;
}

.item[status="removing"] {
    height: 0px;
    opacity: 0;
    text-decoration: line-through;
}

.item[status="removed"] {
    order: 4;
    text-decoration: line-through;
}

.item[status="default"] {
    order: 0;
}

.item[status="absent"] {
    order: 1;
}

.item[status="late"] {
    order: 2;
}

.item[status="ok"] {
    order: 3;
}

.id {
    width: 28px;
    padding-right: 8px;
    text-align: right;
    opacity: .2;
}

.status {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    flex: 1;
}

.status::before {
    content: "·";
    padding: 0 4px;
    font-size: 1.5em;
    color: #999;
}

.status::after {
    padding: 0 4px;
    font-size: .8em;
}

[status="default"] .status::after {
    content: "未校验";
    color: #999;
}

[status="ok"] .status::after {
    content: "正常";
    color: #5b5;
}

[status="absent"] .status::after {
    content: "缺席";
    color: #d44;
}

[status="removing"] .status::after,
[status="removed"] .status::after {
    content: "已移除";
    color: #d00;
}

[status="late"] .status::after {
    content: "迟到";
    color: #f85;
}

.actions {
    display: grid;
    grid-template-columns: 36px 36px;
    gap: 8px;
}

.actions {
    display: grid;
    grid-template-columns: repeat(2, 24px);
    gap: 8px;
    height: 24px;
}

.edit,
.remove {
    position: relative;
    --icon-color: #999;
}

.edit::after,
.edit::before,
.remove::before,
.remove::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
}

.edit::before {
    width: 16px;
    height: 16px;
    border: solid var(--icon-color) 2px;
    left: 4px;
    top: 4px;
    clip-path: polygon(0% 0, 60% 0%, 60% 40%, 100% 40%, 100% 100%, 0% 100%);
}

.edit::after {
    width: 12px;
    height: 12px;
    background: var(--icon-color);
    clip-path: polygon(80% 0, 100% 20%, 20% 100%, 0 100%, 0 80%);
    left: 10px;
    top: 2px;
}

.remove::after,
.remove::before {
    width: 16px;
    height: 2px;
    background: var(--icon-color);
    top: 12px;
    left: 4px;
}

.remove::before {
    transform: rotate(45deg);
}

.remove::after {
    transform: rotate(-45deg);
}

[status="removed"] .remove::after,
[status="removed"] .remove::before {
    background: transparent;
    transform: none;
    left: 4px;
}

[status="removed"] .remove::before {
    border: solid var(--icon-color) 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 4px;
    clip-path: polygon(0 0, 50% 50%, 50% 0%, 100% 0, 100% 100%, 0 100%);
}

[status="removed"] .remove::after {
    border: solid transparent 4px;
    width: 0px;
    height: 0px;
    top: 2px;
    border-right-color: var(--icon-color);
    border-top-width: 3px;
    border-bottom-width: 3px;
}

.no-result {
    opacity: .6;
    font-size: .8em;
    display: flex;
    justify-content: center;
    align-items: center;
}